//根据JsonSchema生成表单

import JsonEditer from "./components/JsonEditer.vue";

import { getSchema } from "@/api/modules/model/schema";
export default defineComponent({
	setup() {
		const jsonData = ref<string>(`{"key":123}`);
		const changeJson = (val: string) => {
			jsonData.value = val;
		};
		const schemaData = ref<SchemaItem>();
		onMounted(async () => {
			const res = await getSchema();
			schemaData.value = res.result.schema;
		});
		return () => {
			return (
				<div class="flex">
					<div style="height: calc(100vh - 160px);width:550px;">
						JSON Schema
						<JsonEditer data={JSON.stringify(schemaData.value, null, 2)} onChange={(val: string) => changeJson(val)} />
					</div>
					<div class="flex-1 flex-row">
						Schema To Form（from properties node）
						<div class="box-border p-4 flex-row bg-white" style="overflow: auto;height: calc(100vh - 160px);">
							<SchemaFormComponent schema={schemaData.value} />
						</div>
					</div>
				</div>
			);
		};
	}
});
import { SchemaItem } from "./interface";
import type { PropType } from "vue";
const SchemaFormComponent = defineComponent({
	props: {
		nodeKey: String,
		schema: {
			type: Object as PropType<SchemaItem>,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		return () => {
			return (
				<div class="mt-15 ">
					{Object.keys(props.schema).map(field => {
						return field == "properties" ? (
							// properties列表
							Object.keys(props.schema.properties).map(childKey => {
								return (
									<SchemaFormComponent
										schema={props.schema.properties[childKey]}
										nodeKey={(props.nodeKey ? props.nodeKey + "-->" : "") + field + "-->" + childKey}
									/>
								);
							})
						) : props.schema.items ? (
							// item数组
							<SchemaFormComponent schema={props.schema.items} nodeKey={(props.nodeKey ? props.nodeKey + "-->" : "") + field} />
						) : (
							//普通属性
							<div>
								{props.nodeKey ? props.nodeKey + "-->" : ""}
								{field}=<span style="color: red;">{JSON.stringify(props.schema[field])}</span>
							</div>
						);
					})}
				</div>
			);
		};
	}
});
